<template>
	<view class="menu_item"  @click="clickItem">
			<image  v-if="menuItem.imageUrl" :src="menuItem.imageUrl" mode="" class="icon"></image>
		<text class="text">
			{{menuItem.name}}
		</text>
	</view>
</template>

<script>
	export default {
		name:"Menus",
		data() {
			return {
				
			};
		},
		props:["menuItem"],
		mounted() {
		},
		methods:{
			clickItem: function() {
				this.$emit("click", this.menuItem);
			}
		}
	}
</script>

<style>
	.menu_item {
		width: 100%;
		height: 80%;
		margin-top: 10rpx;
		position: relative;
	}
	
	.icon {
		position: absolute;
		left: 50%;
		transform: translateX(-50%);
		width:60%;
		height: 70%;
	}
	
	.text {
		width: 100%;
		height: 20%;
		position: absolute;
		font-size: 12px;
		text-align: center;
		bottom: 0;
	}
	

</style>
